<template>
  <a-drawer
    width="600px"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="spinning">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="config.labelCol"
          :wrapper-col="config.wrapperCol"
        >
          <a-row>
            <a-col>
              <a-form-model-item label="Id" prop="configId">
                <a-input
                  v-model="form.configId"
                  placeholder="主键自动生成"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="名称" prop="name">
                <a-input
                  v-model="form.name"
                  placeholder="请输入名称"
                  @change="changeName"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item label="使用类型" prop="useType">
                <a-select
                  placeholder="请选择类型"
                  allow-clear
                  v-model="form.useType"
                >
                  <a-select-option :value="1">普通表单</a-select-option>
                  <a-select-option :value="2">流程表单</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item
                v-if="form.useType == 2"
                label="归属分类"
                prop="typeId"
              >
                <a-select
                  placeholder="请选择归属分类"
                  allow-clear
                  v-model="form.typeId"
                  show-search
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="t in type" :key="t.typeId">
                    {{ t.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="表单类型" prop="formCategory">
                <a-select
                  @change="formCategoryChange"
                  placeholder="请选择表单类型"
                  allow-clear
                  v-model="form.formCategory"
                >
                  <a-select-option :value="1">设计器</a-select-option>
                  <a-select-option :value="2">自定义</a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="表名" prop="dataFromName">
                <a-input
                  allow-clear
                  v-model="form.dataFromName"
                  placeholder="请输入表名"
                />
              </a-form-model-item>
              <a-form-model-item
                v-if="visibleForm.formPcUrl"
                label="表单Pc地址"
                prop="formPcUrl"
              >
                <a-input
                  allow-clear
                  v-model="form.formPcUrl"
                  placeholder="请输入表单Pc地址"
                />
              </a-form-model-item>
              <a-form-model-item
                v-if="visibleForm.formMobileUrl"
                label="表单手机地址"
                prop="formMobileUrl"
              >
                <a-input
                  allow-clear
                  v-model="form.formMobileUrl"
                  placeholder="请输入表单手机地址"
                />
              </a-form-model-item>

              <a-form-model-item label="排序号" prop="orderNo">
                <a-input-number
                  id="inputNumber"
                  style="width: 100%"
                  placeholder="请输入排序号"
                  v-model="form.orderNo"
                  :min="0"
                  :max="999"
                />
              </a-form-model-item>
              <a-form-model-item label="禁用" prop="isFreeze">
                <a-switch v-model="form.isFreeze" />
              </a-form-model-item>
              <a-form-model-item label="备注" prop="remark">
                <a-input
                  allow-clear
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </div>

    <div class="eip-drawer-toolbar flex justify-between align-center">
      <div>
        <a-checkbox v-if="!configId" v-model="save.retain">
          继续创建时，保留本次提交内容
        </a-checkbox>
      </div>

      <a-space>
        <a-button
          v-if="!configId"
          key="submit"
          @click="saveContinue"
          :loading="loading"
          ><a-icon type="save" />提交并继续创建</a-button
        >
        <a-button v-if="configId" @click="cancel"
          ><a-icon type="close" />关闭</a-button
        >
        <a-button
          key="submit"
          @click="saveClose"
          type="primary"
          :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import {
  save,
  findById,
  tableExist,
  table,
  systemType,
} from "@/services/system/agile/form/edit";
import { newGuid } from "@/utils/util";
import { pinyin } from "pinyin-pro";
export default {
  name: "edit",
  data() {
    return {
      config: {
        labelCol: { span: 5 },
        wrapperCol: { span: 17 },
      },
      type: [],
      form: {
        configId: newGuid(),
        dataFromName: null,
        configType: 2,
        dataFrom: 0,
        name: null,
        orderNo: 1,
        isFreeze: false,
        remark: null,
        formCategory: undefined,
        formPcUrl: "",
        formMobileUrl: "",
        useType: 1,
      },
      visibleForm: {
        formPcUrl: false,
        formMobileUrl: false,
        dataFromName: true,
      },
      rules: {
        typeId: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.form.useType == 2) {
                if (!value) {
                  callback(new Error("请选择归属分类"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
        ],
        dataFromName: [
          {
            validator: (rule, value, callback) => {
              if (
                typeof value === "undefined" ||
                value === "" ||
                this.form.formCategory == 2
              ) {
                callback();
              } else {
                //表名是否具有
                let param = {
                  configId: this.form.configId,
                  dataFromName: value,
                };
                tableExist(param).then((result) => {
                  if (result.data) {
                    callback();
                  } else {
                    callback(new Error("表名已存在"));
                  }
                });
              }
            },
            trigger: "blur",
          },
          {
            required: true,
            message: "请输入表名",
            trigger: "blur",
          },
        ],

        useType: [
          {
            required: true,
            message: "请选择使用类型",
          },
        ],
        formCategory: [
          {
            required: true,
            message: "请选择表单类型",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      spinning: false,
      save: {
        continue: false,
        retain: false,
      },
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    configId: String,
    title: {
      type: String,
    },
  },
  mounted() {
    this.find();
  },
  methods: {
    /**
     * 名称改变,生成表名
     * 编辑状态下不改变
     */
    changeName(e) {
      if (!this.configId) {
        var py = pinyin(this.form.name, {
          toneType: "none",
          type: "array",
        });
        var model = this.eipTablePrefix;
        py.forEach((item) => {
          model += item
            .toLowerCase()
            .replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
        });
        this.form.dataFromName = model;
      }
    },
    /**
     * 初始化类型
     */
    async initType() {
      var result = await systemType();

      if (result.code === this.eipResultCode.success) {
        this.type = result.data;
      }
    },
    /**
     *
     * @param {搜索} input
     * @param {*} option
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 表单类型改变
     */
    formCategoryChange() {
      if (this.form.formCategory == 1) {
        this.visibleForm.formPcUrl = false;
        this.visibleForm.formMobileUrl = false;
        this.visibleForm.dataFromName = true;
      }
      if (this.form.formCategory == 2) {
        this.visibleForm.formPcUrl = true;
        this.visibleForm.formMobileUrl = true;
        this.visibleForm.dataFromName = false;
      }
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    saveComfirm() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          that.$loading.show({ text: that.eipMsg.saveloading });
          if (that.form.formCategory == 1) {
            table(that.form).then((result) => {
              if (result.code === that.eipResultCode.success) {
                save(that.form).then(function (result) {
                  if (result.code === that.eipResultCode.success) {
                    that.$message.success(result.msg);
                    if (that.save.continue) {
                      //不保留上次内容
                      if (!that.save.retain) {
                        that.$refs.form.resetFields();
                      }
                      that.form.configId = newGuid();
                    } else {
                      that.cancel();
                    }
                    that.$emit("ok", result);
                  } else {
                    that.$message.error(result.msg);
                  }
                  that.loading = false;
                  that.$loading.hide();
                });
              } else {
                that.$message.error(result.msg);
                that.loading = false;
                that.$loading.hide();
              }
            });
          } else {
            save(that.form).then(function (result) {
              if (result.code === that.eipResultCode.success) {
                that.$message.success(result.msg);
                if (that.save.continue) {
                  //不保留上次内容
                  if (!that.save.retain) {
                    that.$refs.form.resetFields();
                  }
                  that.form.configId = newGuid();
                } else {
                  that.cancel();
                }
                that.$emit("ok", result);
              } else {
                that.$message.error(result.msg);
              }
              that.loading = false;
              that.$loading.hide();
            });
          }
        }
      });
    },
    /**
     *
     */
    saveContinue() {
      this.save.continue = true;
      this.saveComfirm();
    },

    /**
     *
     */
    saveClose() {
      this.save.continue = false;
      this.saveComfirm();
    },
    /**
     * 根据Id查找
     */
    async find() {
      let that = this;
      that.spinning = true;
      await this.initType();
      if (this.configId) {
        findById(this.configId).then(function (result) {
          that.form = result.data;
          that.formCategoryChange();
        });
      }
      that.spinning = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
